SVG 图形教程
1. 什么是 SVG？
SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，用于在 Web 上定义二维图形。与传统的位图图像（如 JPEG 和 PNG）不同，SVG 图像在放大或缩小时不会失真，因为它们是由数学公式定义的，而不是像素点。
1.1 SVG 的优势
- 可缩放性：SVG 图像可以无限放大而不失真。
- 文件大小：SVG 文件通常比位图文件小，尤其是对于复杂图形。
- 可编辑性：SVG 图像可以通过文本编辑器直接编辑。
- 动画支持：SVG 支持 CSS 和 JavaScript 动画。
2. SVG 的基本结构
一个简单的 SVG 图像由 <svg> 标签包裹，内部包含各种图形元素。以下是一个基本的 SVG 结构示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG 示例</title>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</body>
</html>
2.1 SVG 标签
<svg>：定义 SVG 图像的根元素。width和height：定义 SVG 图像的宽度和高度。
2.2 基本图形元素
<circle>：定义一个圆形。cx和cy：圆心的 x 和 y 坐标。r：圆的半径。stroke：边框颜色。stroke-width：边框宽度。fill：填充颜色。
3. 绘制其他基本图形
3.1 矩形
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="3" fill="blue" />
</svg>
3.2 椭圆
<svg width="100" height="100">
<ellipse cx="50" cy="50" rx="40" ry="20" stroke="black" stroke-width="3" fill="green" />
</svg>
3.3 线条
<svg width="100" height="100">
<line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="3" />
</svg>
3.4 多边形
<svg width="100" height="100">
<polygon points="50,10 90,90 10,90" stroke="black" stroke-width="3" fill="yellow" />
</svg>
4. SVG 动画
SVG 图像可以通过 CSS 或 JavaScript 实现动画效果。以下是一个使用 CSS 实现简单动画的示例：
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red">
<animate attributeName="cx" from="50" to="90" dur="2s" repeatCount="indefinite" />
</circle>
</svg>
4.1 动画属性
attributeName：要动画化的属性。from和to：属性的起始值和结束值。dur：动画的持续时间。repeatCount：动画的重复次数。
5. 实践练习
5.1 练习 1：绘制一个简单的笑脸
使用 SVG 绘制一个简单的笑脸，包括一个圆形的脸、两个眼睛和一个嘴巴。
5.2 练习 2：创建一个旋转的正方形
使用 CSS 动画让一个正方形在 SVG 中旋转。
5.3 练习 3：绘制一个复杂的图形
尝试绘制一个复杂的图形，如一个房子或一棵树，并为其添加颜色和动画效果。
6. 总结
SVG 是一种强大的图形格式，适用于需要高清晰度和可缩放性的 Web 应用。通过本教程，你应该已经掌握了 SVG 的基本结构、常用图形元素以及如何使用 CSS 和 JavaScript 为其添加动画效果。继续练习和探索，你将能够创建出更加复杂和动态的 SVG 图形。
7. 进一步学习资源
通过这些资源，你可以深入学习 SVG 的高级特性和应用场景。